<template>
  <div id="RoomInfo" class="page-wrapper">
    <h1 class="main-title">积分配置</h1>
    <div class="selector-wrapper main-card wrapper">
      <div class="main-card"></div>
      <!-- 点击按钮弹出添加表单 -->
      <el-button type="primary" @click="handleAddClick">添加新规则</el-button>
    </div>
    <div class="wrapper">
      <!-- 传递静态数据给 UserTable -->
      <UserTable :tableData="carouselinfo" @refresh-data="fetchData" />
    </div>

    <!-- 数据添加弹窗 -->
    <el-dialog title="添加新规则" :visible.sync="addDialogVisible" width="600px">
      <el-form :model="newRule">
        <el-form-item label="最小抵扣积分">
          <el-input v-model="newRule.minPoints" placeholder="输入最小抵扣积分"></el-input>
        </el-form-item>
             <el-form-item label="积分金额比例">
          <el-input v-model="newRule.pointsRate" placeholder="输入积分金额比例"></el-input>
        </el-form-item>
        <el-form-item label="积分使用门槛">
          <el-input v-model="newRule.reductionThreshold" placeholder="积分使用门槛"></el-input>
        </el-form-item>
        <el-form-item label="佣金比例">
          <el-input v-model="newRule.pointsLimit" placeholder="输入佣金比例"></el-input>
        </el-form-item>
        <el-form-item label="购买后的积分比例">
          <el-input v-model="newRule.pointsThreshold" placeholder="输入购买后的积分比例"></el-input>
        </el-form-item>
        <el-form-item label="最大使用积分">
          <el-input v-model="newRule.maxpoints" placeholder="输入最大使用积分"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddRule">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UserTable from './components/UserTable'

export default {
  name: 'RoomInfo',
  components: {
    UserTable
  },
  data() {
    return {
      addDialogVisible: false, // 控制添加弹窗显示
      newRule: {
        minPoints: '',
        pointsThreshold: '',
        pointsRate: '',
        reductionThreshold: '',
        pointsLimit: '',
        maxpoints: ''
      }, // 新增表单数据
      carouselinfo: [
        {
          id: 1,
          minPoints: 100,
          pointsThreshold: 500,
          pointsRate: 10,
          reductionThreshold: 100,
          pointsLimit: 1000,
                maxpoints: 100,
          state: 1
        },
        {
          id: 2,
          minPoints: 50,
          pointsThreshold: 300,
          pointsRate: 5,
          reductionThreshold: 50,
          pointsLimit: 500,
          maxpoints: 100,
          state: 0
        }
      ] // 轮播数据
    };
  },
  methods: {
    // 打开添加新规则弹窗
    handleAddClick() {
      this.addDialogVisible = true;
      this.newRule = {
        minPoints: '',
        pointsThreshold: '',
        pointsRate: '',
        reductionThreshold: '',
        pointsLimit: '',
        maxpoints: '',
      };
    },
    // 添加新规则
    handleAddRule() {
      if (
        !this.newRule.minPoints ||
        !this.newRule.pointsThreshold ||
        !this.newRule.pointsRate ||
        !this.newRule.reductionThreshold ||
        !this.newRule.pointsLimit ||
        !this.newRule.maxpoints
      ) {
        this.$message.error("请完整填写所有字段");
        return;
      }

      const newId = this.carouselinfo.length + 1;
      const newEntry = {
        id: newId,
        ...this.newRule,
        state: 1 // 默认状态为“使用中”
      };
      
      // 将新规则添加到表格数据中
      this.carouselinfo.push(newEntry);
      this.$message.success("添加成功！");
      this.addDialogVisible = false; // 关闭弹窗
    },
    // 数据刷新逻辑
    fetchData() {
      //  console.log("数据刷新");
      // 这里可以加入刷新逻辑，例如从服务器重新获取数据
    }
  }
};
</script>

<style lang="scss" scoped>
#RoomInfo {
  .qianru {
    color: #fff;
    background-color: #1890ff;
    float: right;
  }
  > .wrapper {
    margin: 40px 0;
  }
  .selector-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; // 垂直居中
  }
  .form-wrapper {
    margin-bottom: 40px;
    .btn-wrapper {
      display: flex;
      flex-direction: row-reverse;
    }
  }
  .search-wrapper {
    display: flex;
  }
  .el-select {
    display: block;
    position: relative;
  }
  .button-wrapper {
    display: flex;
    justify-content: flex-end; // 靠右对齐
    align-items: center; // 垂直居中
  }
}
.upload-demo {
  width: 100%;
}
.preview-image {
  width: 100px;
  height: 100px;
  object-fit: cover; // 保持图片比例
}
.preview-video {
  width: 300px;
  height: 200px;
}
</style>
